<template>
	<div class="user-box">
		<div v-for="(item, index) in props.list" :key="index" style="padding: 0 10px">
			<div class="grid-content">
				<div class="grid-content-top">
					<div class="grid-content-top-pic">
						<div class="grid-content-top-pic-left">
							<div>
								<template v-if="['consumptionVip'].includes(mark)">
									<!-- <img class="imgage" :src="item.avatar"> -->
									<van-image width="58" height="58" :src="item.avatar" radius="10" fit="cover"
										lazy-load />
								</template>
								<img class="imgage" src="../assets/images/shebei.png" v-else>
							</div>
							<div style="margin-left: 10px; font-size: 12px">
								<!-- 无 -->
								<template v-if="['deliveryAddress','secondaryAccount'].includes(mark)"></template>
								<!-- 账号名称 -->
								<template v-else-if="['consumptionVip'].includes(mark)">
									{{ item.username }}
								</template>
								<!-- 订单 -->
								<template v-else-if="['order'].includes(mark)">
									{{ item.deviceNumber }}
								</template>
								<!-- 流量充值 -->
								<template v-else-if="['dataRecharge'].includes(mark)">
									{{ item.iccid }}
								</template>
								<p v-else>{{ item.deviceName }}</p>
							</div>
						</div>
						<div class="grid-content-top-pic-right">
							<!-- 启动配置|设备数 -->
							<p v-if="props.mark === 'device' || mark === 'configuration'|| mark === 'configuration2'|| mark === 'dataRecharge'"
								style="margin-left: 10px; font-size: 12px">
								<van-tag v-if="item.deviceStatus === 0" type="success" size="large">在线</van-tag>
								<van-tag v-else type="danger" size="large">离线</van-tag>
							</p>
							<p v-if="mark === 'record'">
								<van-tag v-if="item.status == 0" type="primary" size="large">上分中</van-tag>
								<van-tag v-else-if="item.status == 1" type="success" size="large">上分成功</van-tag>
								<van-tag v-else type="danger" size="large">上分失败</van-tag>
							</p>
							<!-- vip -->
							<p v-if="mark === 'consumptionVip'">
								<van-tag v-if="item.status === 1" type="danger" size="large">已拉黑</van-tag>
							</p>
							<!-- 默认地址 -->
							<div v-if="mark === 'deliveryAddress'">
								<van-tag type="success" size="large" v-if="item.defaultFlag==0">默认地址</van-tag>
							</div>
							<!-- 转移记录 -->
							<div v-if="mark === 'transferRecord'">
								<van-tag type="success" size="large" v-if="item.type==1">解绑</van-tag>
								<van-tag type="success" size="large" v-else>转移</van-tag>
							</div>
							<!-- 订单 -->
							<div v-if="mark === 'order'">
								<van-tag type="warning" size="large" v-if="item.payState==0">待支付</van-tag>
								<van-tag type="success" size="large" v-if="item.payState==1">已支付</van-tag>
								<van-tag type="danger" size="large" v-if="item.payState==3">订单提交失败</van-tag>
							</div>
							<!-- 子账号 -->
							<div v-if="mark === 'secondaryAccount'">
								<van-tag type="danger" size="large" v-if="item.status">禁用</van-tag>
								<van-tag type="success" size="large" v-else>启用</van-tag>
							</div>
						</div>
					</div>
					<div class="grid-content-top-dec" v-if="['device', 'dataRecharge'].includes(mark)">
						<p class="grid-content-top-dec-p">
							<span class="grid-content-top-dec-span">编号：{{ item.deviceNumber }}</span>
							<span class="grid-content-top-dec-span">店铺名称：{{ item.storeName }}</span>
						</p>
						<p class="grid-content-top-dec-p">
							<span v-if="['device'].includes(mark)"
								class="grid-content-top-dec-span">产品：{{ item.productName }}</span>
							<span v-if="['dataRecharge'].includes(mark)"
								class="grid-content-top-dec-span">绑定时间：{{ item.bindTime }}</span>
							<span class="grid-content-top-dec-span">激活时间：{{ item.createTime }}</span>
						</p>
					</div>
					<!-- 上分记录 -->
					<div class="grid-content-top-dec" v-if="['record'].includes(mark)">
						<p class="grid-content-top-dec-p">
							<span class="grid-content-top-dec-span"
								style="font-weight: 700;">编号：{{ item.deviceNumber }}</span>
							<span class="grid-content-top-dec-span">店铺名称：{{ item.storeName }}</span>
						</p>
						<p class="grid-content-top-dec-p">
							<span class="grid-content-top-dec-span">分数：{{ item.count }}</span>
							<span class="grid-content-top-dec-span">上分时间：{{item.createTime2}}</span>
						</p>
					</div>
					<div v-if="['consumptionVip', 'blacklist'].includes(mark)" class="grid-content-top-dec">
						<p class="grid-content-top-dec-p">
							<span class="grid-content-top-dec-span">昵称：{{ item.nickname }}</span>
							<span class="grid-content-top-dec-span">累计充值：{{ item.totalRechargeAmount }}</span>
						</p>
						<p class="grid-content-top-dec-p">
							<span class="grid-content-top-dec-span" v-if="mark === 'consumptionVip'">
								充值时间：{{ item.latestRechargeTime }}
							</span>
							<span class="grid-content-top-dec-span" v-if="mark === 'blacklist'">
								拉黑日期：{{item.productName}}
							</span>
							<span class="grid-content-top-dec-span">
								注册日期：{{ item.registerTime }}
							</span>
						</p>
					</div>
					<!-- 启动配置 -->
					<div v-if=" ['configuration','configuration2'].includes(mark)" class="grid-content-top-dec">
						<p style="color: #939393;" class="grid-content-top-dec-p">
							<span class="grid-content-top-dec-span">店铺：{{ item.storeName }}</span>
							<span class="grid-content-top-dec-span">创建日期：{{ item.createTime }}</span>
						</p>
						<p style="color: #939393;" class="grid-content-top-dec-p">
							<span class="grid-content-top-dec-span" style="width: 100%;">地址：{{item.detailedAddress}}</span>
						</p>
					</div>
					<!-- 投放地址 -->
					<div v-if="['deliveryAddress'].includes(mark)" class="grid-content-top-dec">
						<p style="color: #939393;" class="grid-content-top-dec-p">
							<span class="grid-content-top-dec-span">店铺：{{ item.storeName }}</span>
							<span class="grid-content-top-dec-span">创建时间：{{ item.createTime }}</span>
						</p>
						<p style="color: #939393;" class="grid-content-top-dec-p">
							<span class="grid-content-top-dec-span" style="width: 100%;">
								详细地址：{{`${ item.province }` + `${ item.city }` + `${ item.district }` + `${ item.detailedAddress }`}}
							</span>
						</p>
					</div>
					<!-- 转移记录 -->
					<div v-if="['transferRecord'].includes(mark)" class="grid-content-top-dec">
						<p style="color: #939393;" class="grid-content-top-dec-p">
							<span class="grid-content-top-dec-span">转入：{{ item.nowStoreName }}</span>
							<span class="grid-content-top-dec-span">转出：{{ item.origStoreName }}</span>
						</p>
						<p style="color: #939393;" class="grid-content-top-dec-p">
							<span class="grid-content-top-dec-span" style="width: 100%;">
								编码：{{ item.deviceId }}
							</span>
							<span class="grid-content-top-dec-span" style="width: 100%;">
								转移日期：{{ item.createTime }}
							</span>
						</p>
					</div>
					<!-- 二级账号 -->
					<div v-if="['secondaryAccount'].includes(mark)" class="grid-content-top-dec">
						<p style="color: #939393;" class="grid-content-top-dec-p">
							<span class="grid-content-top-dec-span">名称：{{ item.name }}</span>
							<span class="grid-content-top-dec-span">上级名称：{{ item.parentName }}</span>
						</p>
						<p style="color: #939393;" class="grid-content-top-dec-p">
							<span class="grid-content-top-dec-span">账号：{{ item.account }}</span>
						</p>
					</div>
					<!-- 订单 -->
					<div v-if="['order'].includes(mark)" class="grid-content-top-dec">
						<p style="color: #939393;" class="grid-content-top-dec-p">
							<span class="grid-content-top-dec-span">用户：{{ item.nickname }}</span>
							<span class="grid-content-top-dec-span">商户：{{ item.merchantName }}</span>
						</p>
						<p style="color: #939393;" class="grid-content-top-dec-p">
							<span class="grid-content-top-dec-span">金额：{{ item.amount }}</span>
							<span class="grid-content-top-dec-span">店铺：{{ item.storeName }}</span>
						</p>
						<p style="color: #939393;" class="grid-content-top-dec-p">
							<span class="grid-content-top-dec-span"
								style="width: 100%;">下单时间：{{ item.createTime }}</span>
						</p>
					</div>
				</div>
				<!-- 分割线 -->
				<template v-if="!['record','transferRecord','blacklist','configuration2'].includes(mark)">
					<div class="divider"></div>
				</template>
				<div class="grid-content-bottom">
					<template v-if="mark === 'consumptionVip'">
						<p @click="blockHandle(item)" v-if="item.status==0">
							<span>拉黑</span>
						</p>
					</template>
					<!-- <p @click="blockHandle(item)" >
						<span>{{ item.status==0?'拉黑':'' }}</span>
					</p> -->
					<!-- <p @click="removeBlacklistHandle(item)" v-else-if="mark === 'blacklist'">
						移除黑名单
					</p> -->
					<p @click="dataRechargeHandle(item)" v-else-if="mark === 'dataRecharge'">
						流量充值
					</p>
					<div v-else-if="['configuration'].includes(mark)" class="flexaround"
						style="padding: 0 40px;width: 100%;">
						<p @click="deviceRecharge(item)">启动配置</p>
						<span style="color: #c1c5cd">|</span>
						<p @click="modifypulse(item)">修改脉冲</p>
					</div>
					<div v-else-if="['deliveryAddress'].includes(mark)" class="flexaround"
						style="padding: 0 40px;width: 100%;">
						<p @click="editDevice(item)">编辑</p>
						<span style="color: #c1c5cd">|</span>
						<p @click="addressDelete(item)">删除</p>
					</div>
					<!-- 子账号 -->
					<div v-else-if="['secondaryAccount'].includes(mark)" class="flexaround"
						style="padding: 0 40px;width: 100%;">
						<p @click="editDevice(item)">编辑</p>
						<span style="color: #c1c5cd">|</span>
						<p @click="disablewAccount(item)">
							{{ item.status?'解禁':'禁用' }}
						</p>
					</div>
					<!-- -if="!['record', 'consumptionVip', 'blacklist', 'dataRecharge','configuration','deliveryAddress'].includes(mark)" -->
					<!-- 没有下方的按钮 -->
					<template v-else-if="['record','transferRecord','blacklist','configuration2'].includes(mark)"></template>
					<template v-else>
						<div class="flexbetween" style="padding: 0 10px;width: 100%;">
							<p @click="details(item)">查看二维码</p>
							<span style="color: #c1c5cd">|</span>
							<p @click="topScores(item)">设备转移</p>
							<span style="color: #c1c5cd">|</span>
							<p @click="editHandle(item)">远程上分</p>
							<span style="color: #c1c5cd">|</span>
							<p @click="unbind(item)">解除绑定</p>
						</div>
					</template>

				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import {
		defineProps
	} from 'vue';
	import {
		useRouter
	} from 'vue-router';
	const router = useRouter();

	const props = defineProps({
		list: {
			type: Array,
			default: []
		},
		mark: {
			type: String,
			default: ''
		}
	});
	//启动配置
	const deviceRecharge = (item) => {
		const data = {
			deviceName: item.deviceName,
			deviceStatus: item.deviceStatus,
			providerName: item.providerName,
			createTime: item.createTime,
			detailedAddress: item.detailedAddress,
			storeId: item.storesId,
		};
		router.push({
			name: 'bootConfigurationDetails',
			params: {
				deviceId: item.id,
				data: JSON.stringify(data)
			}
		})
	};
	//修改脉冲
	const modifypulse = (item) => {
		const data = {
			id: item.id,
			timeInterval: item.timeInterval,
			timeWidth: item.timeWidth,
			proportion: item.proportion,
		}
		router.push({
			name: 'BootupdatePulse',
			params: {
				data: JSON.stringify(item)
			}
		})
	}

	const emitDelete = defineEmits(['AddressDelete', 'AddressEdit', 'blockUser', 'deviceUnbind', 'disableswAccount', 'RechargeHandle']);
	// 删除设备
	const addressDelete = (item) => {
		emitDelete('AddressDelete', item);
	};
	// 编辑
	const editDevice = (item) => {
		emitDelete('AddressEdit', item);
	};
	//解禁/禁用
	const disablewAccount = (item) => {
		emitDelete('disableswAccount', item);
	};
	// 拉黑
	const blockHandle = (item) => {
		emitDelete('blockUser', item);
	};
	// 解绑
	const unbind = (item) => {
		emitDelete('deviceUnbind', item);
	};
	// 流量充值
	const dataRechargeHandle = (item) => {
		emitDelete('RechargeHandle', item);
	};
</script>

<style lang="scss" scoped>
	.flexbetween {
		display: flex;
		align-items: center;
		align-content: center;
		justify-content: space-between;
	}

	.flexaround {
		display: flex;
		align-items: center;
		align-content: center;
		justify-content: space-around;
	}

	.user-box {
		width: 100%;
		height: 100%;
		padding: 0;

		.grid-content {
			// border: 1px solid #c1c5cd;
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
			border-radius: 10px;
			margin-top: 20px;
			background-color: white;

			.grid-content-top {
				width: 100%;
				// border-bottom: 1px solid #c1c5cd;
			}

			.grid-content-top-dec {
				padding: 0 10px;

				.grid-content-top-dec-p {
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 12px;
					margin-top: 0;

					.grid-content-top-dec-span {
						width: 50%;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}
			}

			.grid-content-top-pic {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;
				padding: 10px;
				box-sizing: border-box;

				.imgage {
					width: 58px;
					height: 58px;
					border-radius: 10px;
				}

				.grid-content-top-pic-left {
					display: flex;
					align-items: center;
				}

				.grid-content-top-pic-right {
					.pic {
						width: 30px;
						height: 30px;
						vertical-align: top;
					}
				}
			}

			.grid-content-bottom {
				display: flex;
				align-items: center;
				align-content: center;
				justify-content: space-around;
				padding: 0 10px;
				width: 100%;
				font-size: 12px;
				color: rgb(81, 164, 208);
				box-sizing: border-box;

				p {
					cursor: pointer;
				}
			}
		}
	}

	.towerUnits {
		background-color: #F0473B;
		color: #FFF;
		padding: 0 10px;
		border-radius: 20px;
		height: 25px;
		line-height: 25px;
		margin: 0;
	}

	.divider {
		width: 100%;
		height: 1px;
		border-bottom: 1px solid #c1c5cd;
	}
</style>
